<template>
  <div :class="['container', 'animated', fadeIn]">
    <div class="container--item">
      <div class="container--item__img" v-if="backDel">
        <img src="../assets/receivingAddress/receivingAddress.png"
             class="container--img__bag"
             alt="#">
        <span class="container--img__text">无收货地址</span>
      </div>
      <better-scroll style="height: 82.5vh">
        <div>
          <ul class="container--item__msg" v-if="!backDel">
            <li class="container--item__list"
                v-for="(item, key) in userMsgArr" :key="key" ref="list">
              <div class="container--item__box">
                <img src="../assets/receivingAddress/site.png" class="container--img__site" alt="#">
                <span class="container--site__name">{{item.receiver}}</span>
                <span class="container--site__tell">{{item.phoneNumber}}</span>
                <span class="container--site__site">{{item.location + ' '  +  item.details}}</span>
              </div>
              <div class="container--item__set">
                <img
                  :src="item.isDefault?isDefaultImg[1]: isDefaultImg[0]"
                     class="container--img__option" alt="#"
                     ref="consentImg"
                     @click="optionShow(key)">
                <span class="container--set__text">设为默认</span>
                <div class="container--set__del" @click="rmCity(key)">
                  <img src="../assets/receivingAddress/delete.png"
                       class="container--img__del" alt="#">
                  <span class="container--text__del">删除</span>
                </div>
                <div class="container--set__del alter modification--box" @click="amend(key, item)">
                  <img src="../assets/receivingAddress/modification.png"
                       class="container--img__del modification" alt="#">
                  <span class="container--text__del amend">修改</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </better-scroll>
    </div>
    <div :class="['container--item__popup',  'animated', fadeIn]" v-show="popupBoole">
      <div :class="['container--popup__mask', 'animated', fadeInDown]">
        <div class="circular">!</div>
        <img src="../assets/receivingAddress/close.png" alt="#" @click="off">
        <div class="container--text__msg">
          <span class="container--text__tips">提示</span>
          <span class="container--text__ok">你确定要删除吗？</span>
        </div>
        <div class="container--item__btn" @click="backWarehouse">确定</div>
      </div>
    </div>
    <div class="container--btn__box">
      <div class="container--item__btn" @click="addRess">新增收货地址</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'addressWarehouse',
  data() {
    return {
      /* eslint-disable*/
      popupBoole: false,
      listNum: null,
      backDel: true,
      userMsgArr: [],
      fadeIn: 'fadeIn',
      fadeInDown: 'fadeInDown',
      isDefaultImg: [require('../assets/register/consent2.png'), require('../assets/register/consent.png')],
    };
  },
  methods: {
    addRess() {
      if (this.$route.params.data) {
        this.$router.push({ name: 'personal' });
        this.$popUp({
          message: '请先登录',
        });
      } else {
        setTimeout(() => {
          this.$router.push({ name: 'address' });
        }, 200);
        this.fadeIn = 'fadeOut';
      }
    },
    optionShow(key) {
      this.$api.defaultAddr({ addrid: this.userMsgArr[key]._id })
        .then(data => {
          console.log(data);
          this.userMsgArr.unshift(data.data.data);
          this.userMsgArr.splice(key + 1, 1);
          for (let i = 0; i < this.userMsgArr.length; i ++) this.userMsgArr[i].isDefault = false;
          this.userMsgArr[0].isDefault = true;
        })
        .catch(error => {
          console.log(error);
        });
    },
    off() {
      this.popupBoole = false;
    },
    backWarehouse() {
      this.$api.rmShippingAddress({ addrid: this.userMsgArr[this.listNum]._id })
        .then((data) => {
          console.log(data);
        })
        .catch((error) => {
          console.log(error);
        });
      this.popupBoole = false;
      this.userMsgArr.splice(this.listNum, 1);
    },
    rmCity(key) {
      this.listNum = key;
      this.popupBoole = true;
      this.fadeIn = 'fadeIn';
    },
    amend(key, item) {
      this.$router.push({
        name: 'address',
        params: {
          data: {
            name: item.receiver,
            tell: item.phoneNumber,
            city: item.location,
            deta: item.details,
            id: item._id,
          },
        },
      });
    },
  },
  watch: {
    userMsgArr() {
      if (this.userMsgArr.length === 0) this.backDel = true;
    },
  },
  created() {
    if (localStorage.getItem('userTell')) {
      this.$api.getShippingAddress()
        .then((data) => {
          console.log(data);
          this.userMsgArr = data.data.data;
          if (data.data.data[0]) {
            for (let i = 0; i < data.data.data.length; i ++) {
              if (data.data.data[i].isDefault) {
                data.data.data.unshift(data.data.data[i]);
                data.data.data.splice(i + 1, 1);
                this.userMsgArr = data.data.data;
                break;
              }
            }
            this.backDel = false;
          } else {
            this.backDel = true;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    }
  },
};
</script>

<style scoped lang="scss">
*{
  margin: 0;
  padding: 0;
  font-size: 0;
}
.animated{
  animation-duration: .3s;
}
.container{
  height: 83vh;
  background-color: #f6f6f6;
  .container--item{
    position: relative;
    width: 100vw;
    height: 115.5%;
    .container--item__img{
      position: relative;
      width: 100vw;
      height: 86.5%;
      background-color: #fff;
      .container--img__bag{
        width: 4.2rem;
        height: 3.2rem;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        display: block;
      }
      .container--img__text{
        font-size: .34rem;
        position: absolute;
        left: 40%;
        top: 60%;
        letter-spacing: 2px;
        color: #8b8b8b;
        font-weight: 500;
      }
    }
    .container--item__msg{
      width: 100vw;
      .container--item__list{
        background-color: #fff;
        .container--item__box{
          position: relative;
          width: 100vw;
          height: 2rem;
          padding-left: .3333333rem;
          border-bottom: 1px solid #ccc;
          .container--img__site{
            height: .75rem;
            width: .75rem;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
          }
          .container--site__name{
            font-size: .4rem;
            position: absolute;
            top: .35rem;
            left: 13%;
            font-weight: 500;
            letter-spacing: 1px;
          }
          .container--site__tell{
            position: absolute;
            top: .35rem;
            right: 10%;
            font-size: .4rem;
            font-weight: 500;
          }
          .container--site__site{
            position: absolute;
            top: 1.15rem;
            left: 13%;
            font-size: .4rem;
            font-weight: 500;
            color: #676767;
          }
        }
        .container--item__set{
          padding-left: .3333333rem;
          position: relative;
          width: 100vw;
          height: 1.3rem;
          margin-bottom: .2rem;
          .container--img__option{
            width: .45rem;
            height: .45rem;
            position: absolute;
            top: 0;
            bottom: 0;
            left: .5rem;
            margin: auto;
          }
          .container--set__text{
            font-size: .4rem;
            position: absolute;
            top: .35rem;
            left: 10%;
            font-weight: 500;
            letter-spacing: 1px;
            color: #676767;
          }
          .container--set__del{
            position: absolute;
            top: .3rem;
            right: 1rem;
            .container--img__del{
              width: .6rem;
              height: .6rem;
              vertical-align: middle;
            }
            .modification{
              width: .5rem;
              height: .5rem;
            }
            .container--text__del{
              font-size: .4rem;
              vertical-align: middle;
              color: #676767;
            }
            .amend{
              margin-left: .1rem;
            }
          }
          .modification--box{
            top: .4rem;
            right: 1rem;
          }
          .alter{
            right: 30%;
          }
        }
      }
    }
  }
  .container--item__popup{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    background: rgba(0,0,0,0.3);
    z-index: 999;
    .container--popup__mask{
      position: absolute;
      left: .56rem;
      right: .56rem;
      bottom: 0;
      top: 0;
      margin: auto;
      border-radius: 5px;
      height: 4.466666666667rem;
      background-color: #fff;
      .circular{
        position: absolute;
        left: 0;
        right: 0;
        top: -4.5rem;
        bottom: 0;
        margin: auto;
        font-size: .4rem;
        width: 1.5rem;
        height: 1.5rem;
        line-height: 1.5rem;
        text-align: center;
        color: #fff;
        border-radius: 50%;
        background: url("../assets/receivingAddress/tips.png") no-repeat center #fff;
        background-size: 60%;
      }
      img{
        width: .5rem;
        height: .5rem;
        position: absolute;
        right: .35rem;
        top: .33333rem;
      }
      .container--text__msg{
        .container--text__tips{
          font-size: .4rem;
        }
        .container--text__ok{
          font-size: .4rem;
          color: red;
        }
        span{
          position: relative;
          top: .65rem;
          text-align: center;
          display: block;
          margin-top: .373333rem;
        }
      }
      .container--item__btn{
        position: absolute;
        left: .666667rem;
        right: .666667rem;
        bottom: .666667rem;
        line-height: .9333333rem;
        text-align: center;
        border-radius: 30px;
        background-color: #3c9dfc;
        color: #fff;
        font-size: .4266666rem;
        letter-spacing: 1px;
      }
      .container--item__btn:active{
        background-color: #338fe3;
      }
    }
  }
  .container--btn__box{
    position: absolute;
    bottom: 0;
    width: 100vw;
    height: 1.8rem;
    background-color: #fff;
    .container--item__btn{
      position: absolute;
      left: 1.28rem;
      right: 1.28rem;
      bottom: .4rem;
      line-height: 1.066666rem;
      text-align: center;
      border-radius: 30px;
      background-color: #3c9dfc;
      color: #fff;
      font-size: .4266666rem;
      letter-spacing: 1px;
    }
    .container--item__btn:active{
      background-color: #338fe3;
    }
  }
}
</style>
